<template>
  <div class="an-index">
    <an-carousel></an-carousel>
    <b-container class="an-mavn">
      <!-- 三大模块 -->
      <div class="an-quick">
        <b-card-group deck>
          <b-card
            :title="item.title"
            :img-src="item.src"
            :img-alt="item.title"
            img-top
            v-for="item in list"
            :key="item.id"
          >
            <b-card-text>{{item.const}}</b-card-text>
            <template v-slot:footer>
              <small class="text-muted">
                <router-link :to="'/cont/?id='+ item.articleID">点击查看详情</router-link>
              </small>
            </template>
          </b-card>
        </b-card-group>
      </div>

      <!-- 公司简介部分 -->
      <b-row class="an-compent">
        <b-col md="5">
          <b-img :src="defDate.src" fluid alt="五丰农业"></b-img>
        </b-col>
        <b-col md="7">
          <h1>{{defDate.title}}</h1>
          <p>{{defDate.introduction}}</p>
          <router-link :to="'/cont/?id='+ defDate.id">点击查看详情</router-link>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import anCarousel from "@/components/anCarousel.vue";
import { indexDome, indexCompoent } from "@/api/dateJson.js";
export default {
  components: {
    anCarousel
  },
  data() {
    return {
      list: indexDome,
      defDate: indexCompoent
    };
  }
};
</script>

<style>
.an-index .an-mavn {
  margin-top: 100px;
}
.an-quick {
  padding-bottom: 50px;
  margin-bottom: 200px;
  /* border-bottom: 1px solid #dedede; */
}
.an-compent {
  margin-bottom: 200px;
}
@media (max-width: 768px) {
  /* 手机 */
  .an-mavn {
    margin-top: 15px;
  }
  .an-quick {
    margin-bottom: 5px;
  }
  .an-compent {
    margin-bottom: 15px;
  }
}
</style>
